<template>
  <div class="container-temp">
    <div class="content-template">

      <div>
        <div style="width: 100%;display: flex;">
          <div class="flex-container">
            <div class="left-div" style="width: 600px;  min-height: 300px;border-right: 1px #ccc dashed;">
              <div>
                <div>栏目设置</div>
                <el-form :inline="true" class="demo-form-inline">

                  <el-form-item label="栏目名称">
                    <el-input placeholder="栏目名称" v-model="departSectionTempForm.name" />
                  </el-form-item>
                  <el-form-item label="模板选择">
                    <el-select style="width: 200px;" placeholder="模板选择" v-model="<string>departSectionTempForm.tempId">
                      <el-option v-for="item in templateDetailList" :key="<string>item.tempId"
                        :label="<string>item.name" :value="<string>item.tempId" />
                    </el-select>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="addItem">添加</el-button>
                  </el-form-item>
                </el-form>
              </div>
              <el-table highlight-current-row :data="departSectionTempList" ref="sectionsTableRef"
                @current-change="handleCurrentChange" border style="width: 96%;">
                <el-table-column prop="name" label="栏目名称" />
                <el-table-column prop="tempName" label="模板名称" />
                <el-table-column prop="sort" label="排序">
                  <template #default="scope">
                    <el-input type="text" v-model="<number>scope.row.sort" onkeyup="value=value.replace(/[^\d]/g,'')">
                    </el-input>
                  </template>
                </el-table-column>

                <el-table-column prop="isDefault" label="默认栏目">
                  <template #default="scope">
                    <el-select v-model="scope.row.isDefault" @change="changeSelect(scope.row)"
                      :disabled="scope.row.isDefault === 1">
                      <el-option :key="0" :value="0" label="否">否</el-option>
                      <el-option :key="1" :value="1" label="是">是</el-option>
                    </el-select>
                  </template>
                </el-table-column>
              </el-table>
              <div style="margin-top: 10px;">
                <el-button @click="saveSections">保存</el-button>
                <el-button type="danger" @click="deleteSection">删除</el-button>

              </div>
            </div>
            <div class="right-div" style=" min-height: 300px;display: flex;">
              <div style="width: 150px;">
                <el-table :data="departContentSectionList" border style="width: 95%;margin-left: 5%;"
                  highlight-current-row @current-change="handleCurrentChangeSection">
                  <el-table-column prop="name" label="板块名称" />
                </el-table>
              </div>
              <!-- 单页模式 -->
              <template v-if="activeModel === 1">
                <div style="flex: 1; padding-left:10px">
                  <div style="padding-left: 5px;">
                    <div style="margin-bottom: 5px;">
                      <el-button style="" @click="saveSinglePageData">保存</el-button>
                    </div>
                    <TEditor :parentData="<string>parentData" v-model="editDepartContentSection.content"></TEditor>
                  </div>
                </div>
              </template>
              <!-- 艺术家列表模式 -->
              <template v-if="activeModel === 2">
                <div style="flex: 1; padding-left:10px">
                  <div style="padding-left: 5px;">
                    <div style="margin-bottom: 5px;">
                      <el-input v-model="queryArtistParams.name" placeholder="搜索艺术家名字"
                        style="width: 200px;margin-right: 10px"></el-input>
                      <el-button @click="initInArtistPageData">搜索</el-button>
                      <el-button @click="addArtistRelative">添加艺术家</el-button>
                    </div>

                    <el-table :data="inArtistPageData" border style="width: 95%;" highlight-current-row>
                      <el-table-column prop="name" label="艺术家名字" />

                      <el-table-column prop="artworkType" label="擅长艺术品类型" />
                      <el-table-column label="图片">
                        <template #default="scope">
                          <img v-if="scope.row.url !== null && scope.row.url !== ''" :src="scope.row.url" alt=""
                            style="width: 100px;height: 100px;">
                        </template>
                      </el-table-column>
                      <el-table-column label="操作" width="100">
                        <template #default="scope">
                          <el-button type="primary" @click="removeArtistRelative(scope.row)">移除</el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                    <pagination v-if="artistTotal > 0" v-model:total="artistTotal"
                      v-model:page="queryArtistParams.pageNum" v-model:limit="queryArtistParams.pageSize"
                      @pagination="initInArtistPageData" />
                  </div>
                </div>
              </template>
              <!-- 艺术品列表模式 -->
              <template v-if="activeModel === 3">

                <div style="display: flex;width: 100%;">
                  <div style="width: 200px;padding-left: 10px;">
                    <el-input placeholder="请输入要添加的标签" v-model="contentTagForm.name" style="width: 150px;"></el-input>
                    <div style="margin-top: 10px">
                      <el-button type="primary" @click="addTag">添加</el-button>

                      <el-button type="danger" @click="delTag">删除</el-button>
                    </div>
                    <el-table highlight-current-row @current-change="handleCurrentChangeContent"
                      :data="contentTagPageData" border style="margin-top: 10px;">
                      <el-table-column prop="name" label="标签"></el-table-column>
                    </el-table>
                  </div>
                  <div style="flex: 1; padding-left:10px">
                    <div style="padding-left: 5px;">
                      <div style="margin-bottom: 5px;">
                        <el-input v-model="queryArtworkParams.name" placeholder="搜索艺术品名字2"
                          style="width: 200px;margin-right: 10px"></el-input>
                        <el-input v-model="queryArtworkParams.artistName" placeholder="搜索艺术家名字"
                          style="width: 200px;margin-right: 10px"></el-input>
                        <el-input v-model="queryArtworkParams.artworkNum" placeholder="搜索艺术品编号"
                          style="width: 200px;margin-right: 10px"></el-input>
                        <el-button @click="initInArtworkPageData">搜索</el-button>
                        <el-button @click="addArtworkRelative">添加艺术品</el-button>
                      </div>

                      <el-table :data="inArtworkPageData" border style="width: 95%;" highlight-current-row>
                        <el-table-column prop="name" label="艺术品名字" />
                        <el-table-column prop="artistName" label="艺术家名字" />
                        <el-table-column prop="artworkNum" label="编号" />
                        <el-table-column prop="tag" label="标签">
                          <template #default="scope">
                            {{ getTagsName(scope.row.tag) }}
                          </template>
                        </el-table-column>

                        <el-table-column prop="artworkType" label="艺术品类型" />
                        <el-table-column label="图片">
                          <template #default="scope">
                            <img v-if="scope.row.url !== null && scope.row.url !== ''" :src="scope.row.url" alt=""
                              style="width: 100px;height: 100px;">
                          </template>
                        </el-table-column>
                        <el-table-column label="操作" width="100">
                          <template #default="scope">
                            <el-button type="primary" @click="removeArtworkRelative(scope.row)">移除</el-button>
                          </template>
                        </el-table-column>
                      </el-table>
                      <pagination v-if="artworkTotal > 0" v-model:total="artworkTotal"
                        v-model:page="queryArtworkParams.pageNum" v-model:limit="queryArtworkParams.pageSize"
                        @pagination="initInArtworkPageData" />

                    </div>
                  </div>
                </div>
              </template>
              <!-- 图片列表模式 start -->
              <template v-if="activeModel === 4">
                <div style="flex: 1; padding-left:10px">
                  <div style="padding-left: 5px;">
                    <div style="margin-bottom: 5px;">
                      <el-input v-model="queryPictureParams.name" placeholder="搜索图片名字"
                        style="width: 200px;margin-right: 10px;"></el-input>
                      <el-button style="margin-left: 10px;" @click="initInpicturePageData">搜索</el-button>
                      <el-button style="margin-left: 10px;" @click="addPictureRelative">添加图片</el-button>
                    </div>

                    <el-table :data="inPicturePageData" border style="width: 95%;" highlight-current-row>
                      <el-table-column prop="name" label="图片名字" />
                      <el-table-column prop="name" label="图片标签" />
                      <el-table-column label="图片">
                        <template #default="scope">
                          <img v-if="scope.row.url !== null && scope.row.url !== ''" :src="scope.row.url" alt=""
                            style="width: 20px;height: 20px;">
                        </template>
                      </el-table-column>
                      <el-table-column prop="name" label="操作" width="100">
                        <template #default="scope">
                          <el-button type="primary" @click="removePictureRelative(scope.row)">移除</el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                    <pagination v-if="pictureTotal > 0" v-model:total="pictureTotal"
                      v-model:page="queryPictureParams.pageNum" v-model:limit="queryPictureParams.pageSize"
                      @pagination="initInpicturePageData" />

                  </div>
                </div>
              </template>
              <!-- 图片列表模式 start -->
              <!-- 文章列表模式 -->
              <template v-if="activeModel === 5">
                <div style="flex: 1; padding-left:10px">
                  <div style="padding-left: 5px;">
                    <div style="margin-bottom: 5px;">
                      <el-input v-model="queryArticleParams.name" placeholder="搜索文章名字" style="width: 200px;"></el-input>
                      <el-button @click="initInArtilcePageData">搜索</el-button>
                      <el-button @click="addArticleRelative">添加文章</el-button>
                    </div>

                    <el-table :data="inArticlePageData" border style="width: 95%;" highlight-current-row>
                      <el-table-column prop="name" label="文章名字" />
                      <el-table-column prop="tags" label="图片标签" />
                      <el-table-column label="图片">
                        <template #default="scope">
                          <img v-if="scope.row.url !== null && scope.row.url !== ''" :src="scope.row.url" alt=""
                            style="width: 20px;height: 20px;">
                        </template>
                      </el-table-column>
                      <el-table-column prop="name" label="操作" width="100">
                        <template #default="scope">
                          <el-button type="primary" @click="removeArticleRelative(scope.row)">移除</el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                    <pagination v-if="articleTotal > 0" v-model:total="articleTotal"
                      v-model:page="queryArticleParams.pageNum" v-model:limit="queryArticleParams.pageSize"
                      @pagination="initInArticlePageData" />

                  </div>
                </div>
              </template>
              <!-- 超链接模式模式 -->
              <template v-if="activeModel === 6">
                <div style="flex: 1; padding-left:10px">
                  <div style="padding-left: 5px;">
                    <div style="margin-bottom: 5px;">
                      <div>
                        <el-input v-model="editDepartContentSection.content" placeholder="超链接"
                          type="textarea"></el-input>
                      </div>
                      <div style="margin-top: 5px;">
                        <el-button @click="saveLink">保存</el-button>
                      </div>
                    </div>



                  </div>
                </div>
              </template>

            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 编辑图片弹框 start -->
    <el-dialog :title="pictureDialog.title" v-model="pictureDialog.visible" width="95%"
      @close="closetInitInpicturePageData">
      <div style="display: flex;">

        <div style="flex: 1;padding-left: 10px">
          <div style="width: 100%;">
            <div style="margin-bottom: 10px;">
              <el-input v-model="queryPictureParams.name" placeholder="搜索图片名字"
                style="width: 200px;margin-right: 10px"></el-input>

              <el-button @click="initNotInpicturePageData">搜索</el-button>
            </div>
            <el-table width="100%" :data="notInpicturePageData" highlight-current-row border>
              <el-table-column label="图片标题" prop="name" />

              <el-table-column label="排序" prop="sort" />
              <el-table-column label="标签" prop="name" />
              <el-table-column label="图片">
                <template #default="scope">
                  <img v-if="scope.row.url !== null && scope.row.url !== ''" :src="scope.row.url" alt=""
                    style="width: 100px;height: 100px;">
                </template>
              </el-table-column>
              <el-table-column label="操作">
                <template #default="scope">
                  <el-button type="primary" @click="addPictureToContent(scope.row)">加入模块</el-button>
                </template>
              </el-table-column>
            </el-table>
            <pagination v-if="pictureTotal > 0" v-model:total="pictureTotal" v-model:page="queryPictureParams.pageNum"
              v-model:limit="queryPictureParams.pageSize" @pagination="initNotInpicturePageData" />
          </div>
        </div>
      </div>
    </el-dialog>
    <!-- 编辑图片弹框 end -->

    <!-- 编辑艺术品弹框 start -->
    <el-dialog :title="artworkDialog.title" v-model="artworkDialog.visible" width="95%"
      @close="closeInitInArtworkPageData">
      <div style="display: flex;">
        <div style="flex: 1;padding-left: 10px">
          <div style="margin-bottom: 10px;">
            <el-input v-model="queryArtworkParams.name" placeholder="搜索艺术品名字"
              style="width: 200px;margin-right: 10px"></el-input>
            <el-input v-model="queryArtworkParams.artistName" placeholder="搜索艺术家名字"
              style="width: 200px;margin-right: 10px"></el-input>
            <el-input v-model="queryArtworkParams.artworkNum" placeholder="搜索艺术品编号"
              style="width: 200px;margin-right: 10px"></el-input>
            <el-button @click="initNotInArtworkPageData">搜索</el-button>
          </div>
          <div style="width: 100%;">
            <el-table width="100%" :data="notInArtworkPageData" highlight-current-row border>
              <el-table-column label="艺术品名称" prop="name" />
              <el-table-column label="艺术家" prop="artistName" />
              <el-table-column label="编号" prop="artworkNum" />
              <el-table-column label="排序" prop="sort" />
              <el-table-column label="标签" prop="name" />
              <el-table-column label="图片">
                <template #default="scope">
                  <img v-if="scope.row.url !== null && scope.row.url !== ''" :src="scope.row.url" alt=""
                    style="width: 100px;height: 100px;">
                </template>
              </el-table-column>
              <el-table-column label="操作">
                <template #default="scope">
                  <el-button type="primary" @click="addArtworkToContent(scope.row, scope.$index)">艺术品加入模块</el-button>
                  <div>
                    <el-checkbox-group v-model="tagscheckBoxList[scope.$index]">
                      <template v-for="(item, index) in tagList">
                        <el-checkbox v-if="item.value !== null && item.value !== ''" :label="item.name"
                          :value="item.value" />
                      </template>
                    </el-checkbox-group>
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <pagination v-if="artworkTotal > 0" v-model:total="artworkTotal" v-model:page="queryArtworkParams.pageNum"
              v-model:limit="queryArtworkParams.pageSize" @pagination="initNotInArtworkPageData" />
          </div>
        </div>
      </div>
    </el-dialog>
    <!-- 编辑艺术品弹框 end -->

    <!-- 编辑艺术家弹框 start -->
    <el-dialog :title="artistDialog.title" v-model="artistDialog.visible" width="95%"
      @close="clostInitInArtistPageData">
      <div style="margin-bottom: 10px;">
        <el-input v-model="queryArtistParams.name" placeholder="搜索艺术家名字"
          style="width: 200px;margin-right: 10px"></el-input>
        <el-button @click="initNotInArtistPageData">搜索</el-button>
      </div>
      <div style="display: flex;">

        <div style="flex: 1;padding-left: 10px">
          <div style="width: 100%;">
            <el-table width="100%" :data="notInArtistPageData" highlight-current-row border>
              <el-table-column label="艺术家名字" prop="name" />
              <el-table-column label="擅长艺术类型" prop="artistType" />
              <el-table-column label="排序" prop="sort" />
              <el-table-column label="标签" prop="name" />
              <el-table-column label="图片">
                <template #default="scope">
                  <img v-if="scope.row.url !== null && scope.row.url !== ''" :src="scope.row.url" alt=""
                    style="width: 100px;height: 100px;">
                </template>
              </el-table-column>
              <el-table-column label="操作">
                <template #default="scope">
                  <el-button type="primary" @click="addArtistToContent(scope.row)">艺术家加入模块</el-button>
                </template>
              </el-table-column>
            </el-table>
            <pagination v-if="artistTotal > 0" v-model:total="artistTotal" v-model:page="queryArtistParams.pageNum"
              v-model:limit="queryArtistParams.pageSize" @pagination="initNotInArtistPageData" />
          </div>
        </div>
      </div>
    </el-dialog>
    <!-- 编辑艺术家弹框 end -->

    <!-- 编辑文章弹框 start -->
    <el-dialog :title="articleDialog.title" v-model="articleDialog.visible" width="95%"
      @close="clostinitInArtilcePageData">
      <div style="display: flex;">

        <div style="flex: 1;padding-left: 10px">
          <div style="width: 100%;">
            <div style="margin-bottom: 10px;">
              <el-input v-model="queryArticleParams.name" placeholder="搜索文章标题"
                style="width: 200px;margin-right: 10px"></el-input>
              <el-button @click="initNotInArticlePageData">搜索</el-button>
            </div>
            <el-table width="100%" :data="notInArticlePageData" highlight-current-row border>
              <el-table-column label="文章标题" prop="name" />

              <el-table-column label="排序" prop="sort" />
              <el-table-column label="标签" prop="name" />
              <el-table-column label="文章封面图">
                <template #default="scope">
                  <img v-if="scope.row.url !== null && scope.row.url !== ''" :src="scope.row.url" alt=""
                    style="width: 100px;height: 100px;">
                </template>
              </el-table-column>
              <el-table-column label="操作">
                <template #default="scope">
                  <el-button type="primary" @click="addArticleToContent(scope.row)">文章加入模块</el-button>
                </template>
              </el-table-column>
            </el-table>
            <pagination v-if="articleTotal > 0" v-model:total="articleTotal" v-model:page="queryArticleParams.pageNum"
              v-model:limit="queryArticleParams.pageSize" @pagination="initNotInArticlePageData" />
          </div>
        </div>
      </div>
    </el-dialog>
    <!-- 编辑文章弹框 end -->

    <!-- 编辑牌匾弹框 start -->
    <el-dialog :title="bannerDialog.title" v-model="bannerDialog.visible" width="95%"
      @close="clostinitInArtilcePageData">
      <div style="margin-bottom: 10px;border-bottom: 1px solid dashed;">

        <el-input-number v-model="<number>queryParams.textHeight" placeholder="牌匾高度"
          style="width: 180px;margin-right: 10px"></el-input-number>
        <el-button type="primary" @click="saveBanner">保存</el-button>
      </div>
      <div style="display: flex;border-top: 1px dashed #ccc;padding-top: 10px;">
        <div style="width: 400px;padding-right: 10px;border-right: 1px #ccc dashed;">
          <el-tag style="margin-bottom: 10px;" size="large" type="success">牌匾图片</el-tag>
          <div style="margin-bottom: 10px;">
            <div style="margin-bottom: 10px;">
              <el-input-number v-model="<number>queryParams.bannerWidth" placeholder="图片高度"
                style="width: 180px;margin-right: 10px"></el-input-number>
              <el-input-number v-model="<number>queryParams.bannerHeight" placeholder="图片宽度"
                style="width: 180px;margin-right: 10px"></el-input-number>
            </div>
            <single-uploadp v-model="<string>queryParams.bannerUrl" />

          </div>
        </div>
        <div style="flex: 1;padding-left: 10px">
          <div style="width: 100%;">
            <el-tag style="margin-bottom: 10px;" size="large" type="success">牌匾文字</el-tag>
            <TEditor :parentData="<string>parentData1" v-model="queryParams.bannerText"></TEditor>

          </div>
        </div>
      </div>
    </el-dialog>
    <!-- 编辑牌匾弹框 end -->

  </div>
</template>

<script setup lang="ts">
// 艺术家接口
import ArtistApi from "@/api/artist";
import { ArtistQuery, ArtistPageResult, ArtistForm, ArtistPageVO } from "@/api/artist/model"
// 图片接口
import PictureApi from "@/api/picture";
import { PictureQuery, PicturePageResult, PictureForm, PicturePageVO } from "@/api/picture/model"
// 艺术品接口
import ArtworkApi from "@/api/artwork";
import { ArtworkQuery, ArtworkPageResult, ArtworkForm, ArtworkPageVO } from "@/api/artwork/model"
// 文章接口
import ArticleApi from "@/api/article";
import { ArticleQuery, ArticlePageResult, ArticleForm, ArticlePageVO } from "@/api/article/model"

import SingleUploadp from "@/components/Upload/SingleUploadp.vue";

// 内容标签接口
import contentTagApi from "@/api/contentTag";
import { ContentTagQuery, ContentTagPageResult, ContentTagForm, ContentTag, ContentTagPageVO } from "@/api/contentTag/model"



import { useRoute } from 'vue-router';
import DepartTempAPI from "@/api/departTemp";
import DemplateDetailAPI from "@/api/templateDetail"
import DepartSectionTempAPI from "@/api/departSectionTemp"
import DepartContentSectionAPI from "@/api/departContentSection"
import TEditor from "@/components/TEditor/TEditor.vue";

import { DepartTempQuery, DepartTempPageResult, DepartTempForm, DepartTemp } from "@/api/departTemp/model"
import { DepartContentSection } from "@/api/departContentSection/model"
import { DepartSectionTempQuery, DepartSectionTempPageResult, DepartSectionTempForm, DepartSectionTemp } from "@/api/departSectionTemp/model"
import { TemplateDetail, TemplateDetailQuery } from '@/api/templateDetail/model'
import { template } from 'lodash';
import { SourceTextModule } from 'vm';
import { c } from 'vite/dist/node/types.d-aGj9QkWt';
const route = useRoute();

const queryParams = reactive<DepartTempQuery>({
  pageNum: 1,
  pageSize: 10,
  name: null
});


const templateDetailQuery = reactive<TemplateDetailQuery>({
  pageNum: 1,
  pageSize: 10,
  plateType: 1
});

const queryContentTagParams = reactive<ContentTagQuery>({
  pageNum: 1,
  pageSize: 10
});
// 选中模式  0:不显示  1:单页列表  2:艺术家列表  5:文章列表
const activeModel = ref<Number>(0);

const tagscheckBoxList = ref<string[][]>([])
const tagList = ref<{
  name: string,
  value: string
}[]>([
  {
    name: "全部",
    value: ""
  },
])

// 图片分页数据
const inPicturePageData = ref<PicturePageVO[]>();

// 图片分页数据
const notInpicturePageData = ref<PicturePageVO[]>();
// 艺术品分页数据
const inArtworkPageData = ref<ArtworkPageVO[]>();
const notInArtworkPageData = ref<ArtworkPageVO[]>();
// 文章分页数据
const inArticlePageData = ref<ArticlePageVO[]>();
const notInArticlePageData = ref<ArticlePageVO[]>();
// 艺术家分页数据
const inArtistPageData = ref<ArtistPageVO[]>();
const notInArtistPageData = ref<ArtistPageVO[]>();

const selectContentTag = reactive<ContentTag>({})


const pictureTotal = ref(0)
const artworkTotal = ref(0)
const artistTotal = ref(0)
const articleTotal = ref(0)
// 图片分页查询参数
const queryPictureParams = reactive<PictureQuery>({
  pageNum: 1,
  pageSize: 10,
  plateId: "",
  plateType: 2,
});
// 艺术品分页查询参数
const queryArtworkParams = reactive<ArtworkQuery>({
  pageNum: 1,
  pageSize: 10,
  departId: "",
});
const queryArtistParams = reactive<ArtistQuery>({
  pageNum: 1,
  pageSize: 10,
  departId: "",
  honors: "",
});

// 添加标签对象
const contentTagForm = reactive<ContentTagForm>({});

const queryArticleParams = reactive<ArticleQuery>({
  pageNum: 1,
  pageSize: 10,
  plateId: "",
  plateType: 2,

});

// 标签
const contentTagPageData = ref<ContentTagPageVO[]>();


// 选中栏目对象
const selctDepartSectionTempForm = ref<DepartSectionTemp>({})


// 模块表格选中对象
const selectDepartContentSection = reactive<DepartContentSection>({})

const editDepartContentSection = reactive<DepartContentSection>({
  id: null,
  name: null,
  sort: null,

})
const artistDialog = reactive({
  title: "添加艺术家到板块",
  visible: false,
});
// 打开图片编辑
const pictureDialog = reactive({
  title: "添加图片到板块",
  visible: false,
});
// 打开艺术品编辑
const artworkDialog = reactive({
  title: "添加艺术品到板块",
  visible: false,
});
// 打开文章编辑
const articleDialog = reactive({
  title: "添加文章到板块",
  visible: false,
});
const bannerDialog = reactive({
  title: "设置牌匾",
  visible: false,
});


// 添加栏目对象
const departSectionTempForm = reactive<DepartSectionTempForm>({})
// 栏目列表
const departSectionTempList = ref<DepartSectionTemp[]>([]);

const departContentSectionList = ref<DepartContentSection[]>([]);

const templateDetailList = ref<TemplateDetail[]>([]);

const newTemplateName = ref<string>('');

const newTemplate = ref<string>('');
// 富文本编辑器 父级数据
const parentData = ref<string>('')

const parentData1 = ref<string>('')


onMounted(() => {
  getTemplate();
  getTemplateDetailList();
  getDepartSectionTempList();
});

function handleCurrentChange(value: DepartSectionTemp) {
  selctDepartSectionTempForm.value = value;
  getDepartContentSectionList()
}
// 机构栏目内容列表
function getDepartContentSectionList() {
  if (selctDepartSectionTempForm.value === null) {
    departContentSectionList.value = []
    return
  }
  DepartContentSectionAPI.getList(selctDepartSectionTempForm.value).then((res) => {
    departContentSectionList.value = res;
    console.log(res)
  })
}

// 添加标签
function addTag() {
  contentTagForm.contentId = selectDepartContentSection.contentId;
  contentTagApi.add(contentTagForm).then(res => {
    contentTagForm.name = ''
    contentTagForm.contentId = ""
    initContentTagList()
  })
}

function handleCurrentChangeContent(row: ContentTag) {
  if (row === null || row === undefined) {
    clearSelectContentTag()
    return
  }
  selectContentTag.id = row.id;
  selectContentTag.name = row.name;
  selectContentTag.contentId = row.contentId;
}

function initContentTagList() {
  contentTagApi.getPage(queryContentTagParams).then(res => {
    console.log(res, "获取标签列表")
    contentTagPageData.value = res.records;
    tagList.value = []
    for (let i = 0; i < res.records.length; i++) {
      let item = res.records[i];
      tagList.value.push({
        name: <string>item.name,
        value: <string>item.tagId
      })
    }
    console.log(tagList.value)
  })
}

function addItem() {
  if (departSectionTempForm.name === null || departSectionTempForm.name === "" || departSectionTempForm.name === undefined) {
    ElMessage.error("请输入栏目名称")
    return
  }
  if (departSectionTempForm.tempId === null || departSectionTempForm.tempId === "" || departSectionTempForm.tempId === undefined) {
    ElMessage.error("请选择模板")
    return
  }
  departSectionTempForm.departId = '358a5bee-7600-4c88-803c-1c92e74b8dc7';

  if (departSectionTempList.value.length === 0) {
    departSectionTempForm.isDefault = 1
  } else {
    let sort = 0;
    departSectionTempList.value.forEach((item) => {
      if (item.sort! > sort) {
        sort = item.sort!;
      }
    });
    departSectionTempForm.sort = sort + 1;
  }

  DepartSectionTempAPI.add(departSectionTempForm).then((res) => {
    console.log(res, "添加成功")
    getDepartSectionTempList()
  })

}
/**
 * 删除栏目
 */
function deleteSection() {
  console.log(selctDepartSectionTempForm.value.id)
  if (selctDepartSectionTempForm.value.id === null || selctDepartSectionTempForm.value.id === undefined) {
    ElMessage.error("请选择要删除的栏目");
    return;
  }
  DepartSectionTempAPI.delete(selctDepartSectionTempForm.value).then((res) => {
    console.log(res, "删除成功")
    getDepartSectionTempList()
  })

}
/**
 * 艺术品
 * @param row 
 */
function addArtworkToContent(row: any, index: number) {
  row.contentId = selectDepartContentSection.contentId;
  row.tag = ""
  if (tagscheckBoxList.value[index].length > 0) {
    for (let i = 0; i < tagscheckBoxList.value[index].length; i++) {
      let item = tagscheckBoxList.value[index][i];
      if (row.tag === "") {
        row.tag = item
      } else {
        row.tag = row.tag + "|" + item
      }

    }
  }
  ArtworkApi.addToRelative(row).then(res => {
    initNotInArtworkPageData()
  })
}
/**
 * 艺术家
 * @param row 
 */
function addArtistToContent(row: any) {
  row.contentId = selectDepartContentSection.contentId;
  ArtistApi.addToRelative(row).then(res => {
    initNotInArtistPageData()
  })
}
/**
 * 文章
 * @param row 
 */
function addArticleToContent(row: any) {
  row.contentId = selectDepartContentSection.contentId;
  ArticleApi.addToRelative(row).then(res => {
    initNotInArticlePageData()
  })
}
function initNotInArtistPageData() {
  ArtistApi.getPageNoRelative(queryArtistParams).then(res => {
    console.log(res, "获取艺术家列表")
    notInArtistPageData.value = res.records;
  })
}


function initNotInArticlePageData() {

  ArticleApi.getPageNoRelativeFull(queryArticleParams).then(res => {
    console.log(res, "获取文章列表")
    notInArticlePageData.value = res.records;
  })
}
function initNotInArtworkPageData() {
  tagscheckBoxList.value = []
  ArtworkApi.getPageNoRelative(queryArtworkParams).then(res => {
    console.log(res, "获取图片列表")
    notInArtworkPageData.value = res.records;
    res.records.forEach((item: any) => {
      tagscheckBoxList.value.push([])
    })
    artworkTotal.value = res.total;
  })
}

function handleCurrentChangeSection(row: any) {
  console.log(row, "变化")
  if (row === null || row === undefined) {
    activeModel.value = 0;
    return
  }
  activeModel.value = row.contentType;
  // 选中对象
  selectDepartContentSection.content = row.content;
  selectDepartContentSection.id = row.id;
  selectDepartContentSection.departId = row.departId;
  selectDepartContentSection.contentId = row.contentId;
  // 编辑对象
  editDepartContentSection.content = row.content;
  editDepartContentSection.id = row.id;

  switch (activeModel.value) {
    case 1:
      // 单页模式
      initSinglePageData()
      break;
    case 2:
      // 艺术家列表
      queryArtistParams.contentId = selectDepartContentSection.contentId
      queryArtistParams.departId = selectDepartContentSection.departId
      initInArtistPageData()
      break;
    case 3:
      // 艺术品列表
      queryArtworkParams.contentId = selectDepartContentSection.contentId
      queryArtworkParams.departId = selectDepartContentSection.departId

      // 艺术品标签
      queryContentTagParams.contentId = selectDepartContentSection.contentId
      initContentTagList()
      initInArtworkPageData()
      break;
    case 4:
      // 图片列表模式
      queryPictureParams.contentId = selectDepartContentSection.contentId
      queryPictureParams.plateId = selectDepartContentSection.departId
      initInpicturePageData()
      break;
    case 5:
      // 文章列表模式
      queryArticleParams.contentId = selectDepartContentSection.contentId
      queryArticleParams.plateId = selectDepartContentSection.departId
      initInArticlePageData()
      break;
    case 6:
      queryArtistParams.contentId = selectDepartContentSection.contentId
      queryArtistParams.departId = selectDepartContentSection.departId
      // 超链接模式
      break;
  }
}

function delTag() {
  if (selectContentTag.id === null || selectContentTag.id === undefined) {
    ElMessage.error("请选择要删除的标签")
    return
  } else {
    contentTagApi.delete(selectContentTag).then(res => {
      clearSelectContentTag()
      initContentTagList()
    })
  }
}
function clearSelectContentTag() {
  selectContentTag.id = null;
  selectContentTag.name = "";
  selectContentTag.contentId = "";
}
/**
 * 初始化单页数据
 */
function initSinglePageData() {
  parentData.value = ""
  setTimeout(() => {
    if (editDepartContentSection.content === null) {
      parentData.value = ''
    } else {
      console.log("注入数据")
      parentData.value = <string>editDepartContentSection.content
    }
  }, 1000);
}

function saveSections() {
  console.log(departSectionTempList, "保存")
  DepartSectionTempAPI.saveBatch(departSectionTempList.value).then((res) => {
    getDepartSectionTempList()
    console.log(res, "保存成功")

  })
}

function getDepartSectionTempList() {
  if (queryParams.departId === null || queryParams.departId === '' || queryParams.departId === undefined) {
    ElMessage.error("数据错误");
    return
  }
  DepartSectionTempAPI.getList(queryParams).then((res) => {
    departSectionTempList.value = res;
    console.log(res)
  })
}

function getTemplateDetailList() {
  DemplateDetailAPI.getList(templateDetailQuery).then((res) => {
    templateDetailList.value = res;
    console.log(res)
  })
}
/**
 * 保存单页数据
 */
function saveSinglePageData() {
  console.log(editDepartContentSection, "提取数据")
  DepartContentSectionAPI.edit(editDepartContentSection).then((res) => {
    console.log(res, "保存成功")
    getDepartContentSectionList()
  })

}
/**
 * 保存超链接
 */
function saveLink() {
  console.log(editDepartContentSection, "提取数据")
  DepartContentSectionAPI.edit(editDepartContentSection).then((res) => {
    console.log(res, "保存成功")
    getDepartContentSectionList()
  })
}

function changeSelect(item: any) {
  if (item.isDefault === 1) {
    for (let i = 0; i < departSectionTempList.value.length; i++) {
      let _item = departSectionTempList.value[i];
      if (_item.sectionId !== item.sectionId) {
        departSectionTempList.value[i].isDefault = 0;
      } else {
        departSectionTempList.value[i].isDefault = 1;
      }

    }
  }
  console.log(item.isDefault, item.sectionId)
}


/**
 * 获取模板内容
 */
function getTemplate() {
  queryParams.departId = '358a5bee-7600-4c88-803c-1c92e74b8dc7';
  DepartTempAPI.getDepartTemp(queryParams).then((res) => {
    queryParams.name = res.name;
    queryParams.bannerText = res.bannerText;
    queryParams.bannerUrl = res.bannerUrl;
    queryParams.id = res.id;
    queryParams.textHeight = res.textHeight;
    queryParams.bannerWidth = res.bannerWidth;
    queryParams.bannerHeight = res.bannerHeight;
    setTimeout(() => {
      parentData1.value = <string>res.bannerText
    }, 1000);
    console.log(res);
  })
}

function saveBanner() {
  DepartTempAPI.saveDepartTemp(queryParams).then((res) => {
    console.log(res, "保存成功")
    bannerDialog.visible = false
  })
}
/**
 * 添加图片
 */
function addPictureRelative() {
  pictureDialog.visible = true
  clearQueryPictureParams()
  initNotInpicturePageData()
}
/**
 * 添加艺术品
 */
function addArtworkRelative() {
  artworkDialog.visible = true
  clearQueryArtworkParams()
  initNotInArtworkPageData()
}
function getTagsName(tags: string) {
  console.log("55555")
  if (tags === null || tags === undefined) {
    return ""
  }
  console.log(tags, 9999)
  let str = tags
  tagList.value.forEach((item) => {
    str = str.replace(item.value, item.name)
  })
  return str

}
/**
 * 添加艺术家
 */
function addArtistRelative() {
  artistDialog.visible = true
  clearQueryArtistParams()
  initNotInArtistPageData()
}
/**
 * 添加文章
 */
function addArticleRelative() {
  articleDialog.visible = true
  initNotInArticlePageData()
}

/**
 * 移除图片
 */
function removePictureRelative(row: any) {
  row.contentId = selectDepartContentSection.contentId;
  PictureApi.removePictureRelative(row).then(res => {
    initInpicturePageData()
  })

}
/**
 * 移除艺术品
 * @param row 
 */
function removeArtworkRelative(row: any) {
  row.contentId = selectDepartContentSection.contentId;
  ArtworkApi.removeArtworkRelative(row).then(res => {
    initInArtworkPageData()
  })
}
/**
 * 移除艺术家
 * @param row 
 */
function removeArtistRelative(row: any) {
  row.contentId = selectDepartContentSection.contentId;
  ArtistApi.removeArtistRelative(row).then(res => {
    initInArtistPageData()
  })
}
/**
 * 移除文章
 * @param row 
 */
function removeArticleRelative(row: any) {
  row.contentId = selectDepartContentSection.contentId;
  ArticleApi.removeArticleRelative(row).then(res => {
    initInArticlePageData()
  })

}

/**
 * 初始化未添加的图片数据
 */
function initNotInpicturePageData() {
  PictureApi.getPageNoRelative(queryPictureParams).then(res => {
    console.log(res, "获取图片列表")
    notInpicturePageData.value = res.records;
    pictureTotal.value = res.total;
  })
}

function clearQueryPictureParams() {
  queryPictureParams.name = ''
  queryPictureParams.pageSize = 10
  queryPictureParams.pageNum = 1;
  pictureTotal.value = 0;
}

function closetInitInpicturePageData() {
  clearQueryPictureParams()
  initInpicturePageData()
}

function initInpicturePageData() {
  PictureApi.getPageRelative(queryPictureParams).then(res => {
    console.log(res, "获取图片列表")
    inPicturePageData.value = res.records;
    pictureTotal.value = res.total;
  })
}

function initInArticlePageData() {
  ArticleApi.getPageRelativeFull(queryArticleParams).then(res => {
    console.log(res, "获取文章列表")
    inArticlePageData.value = res.records;
  })
}
function clearQueryArtworkParams() {
  queryArtworkParams.name = ''
  queryArtworkParams.artistName = ''
  queryArtworkParams.artworkNum = ''
  queryArtworkParams.pageSize = 10
  queryArtworkParams.pageNum = 1;
  artworkTotal.value = 0;
}
function closeInitInArtworkPageData() {
  clearQueryArtworkParams()
  initInArtworkPageData()
}
function initInArtworkPageData() {
  ArtworkApi.getPageRelative(queryArtworkParams).then(res => {
    console.log(res, "获取艺术品列表")
    inArtworkPageData.value = res.records;
    artworkTotal.value = res.total;
  })
}
function clearQueryArticleParams() {
  queryArticleParams.name = ''
  queryArticleParams.pageSize = 10
  queryArticleParams.pageNum = 1;
  articleTotal.value = 0;
}
function clostinitInArtilcePageData() {
  clearQueryArticleParams()
  initInArtilcePageData()
}
function initInArtilcePageData() {
  ArticleApi.getPageRelativeFull(queryArticleParams).then(res => {
    console.log(res, "获取艺术品列表")
    inArticlePageData.value = res.records;
    articleTotal.value = res.total;
  })
}
function initInArtistPageData() {
  ArtistApi.getPageRelative(queryArtistParams).then(res => {
    console.log(res, "获取艺术家列表")
    inArtistPageData.value = res.records;
    artistTotal.value = res.total;
  })
}
function clearQueryArtistParams() {
  queryArtistParams.name = ''
  queryArtistParams.pageSize = 10
  queryArtistParams.pageNum = 1;
  artistTotal.value = 0;
}

function clostInitInArtistPageData() {
  clearQueryArtistParams()
  initInArtistPageData()
}
/**
 * 添加图片到板块
 * @param row 
 */
function addPictureToContent(row: any) {
  row.contentId = selectDepartContentSection.contentId;
  PictureApi.addToRelative(row).then(res => {
    initNotInpicturePageData()
  })
}
/**
 * 查询能添加的图片数据
 */

function closeTab() {
  window.close();
}
/**
 * 设置banner
 */
function setBanner() {
  bannerDialog.visible = true;
  parentData1.value = ''
  getTemplate();
  setTimeout(() => {
    console.log(queryParams.bannerText)
    parentData1.value = <string>queryParams.bannerText
  }, 1000);
  console.log("设置banner")
}
</script>

<style scoped>
.container-temp {
  height: 100vh;
  display: flex;
  width: 100%;
  flex-direction: column;
}

.container-header {
  width: 100%;
  line-height: 60px;
  padding-left: 20px;
}

.content-template {
  width: 100%;
  flex: 1;
  overflow-y: auto;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 20px;
}

.flex-container {
  display: flex;
  width: 100%;
}

.left-div {
  flex: 0 0 600px;
}

.right-div {
  flex: 1;
  padding-left: 10px;
}
</style>